<template>
  <div>
    <el-container>
      <el-header>
        <div class="dv1">
          <span>者也专栏</span>
          <div>
            <el-button
              type="primary"
              v-show="!store.state.tokens"
              @click="$router.push('/')"
              >登录</el-button
            >
            <el-button type="primary" v-show="store.state.tokens==''"
              >注册</el-button
            >
            <el-button
              type="primary"
              v-show="store.state.tokens"
              @click="changeflag"
              >你好123456</el-button
            >
          </div>
        </div>
      </el-header>
      <el-main>
        <div v-show="data.boole" class="fixed">
          <p @click="router.push('/write')">新建文章</p>
          <p @click="my">我的专栏</p>
          <p>编辑资料</p>
          <p @click="euit">退出登陆</p>
        </div>
        <router-view></router-view>
      </el-main>
      <el-footer>Footer</el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { getinfo } from "../utils/api";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
const store = useStore();
const data = reactive({ boole: false });
const router = useRouter();
const changeflag = () => {
  data.boole = true;
};
// 退出登陆
const euit = () => {
  localStorage.removeItem("token");
  router.push("/");
  data.boole = false;
  store.commit('getuser')
};
// 我的专栏
const my = async() => {
 await getinfo().then((res) => {
    let id = res.data.data.column;
    router.push({path:"my",query:{id}});
  });
  console.log(id)
  if (localStorage.getItem("token")) {
    router.push({path:"my",query:{id}});
  } else {
    router.push("/");
    data.boole = false;
  }
};
</script>

<style lang="scss" scoped>
.fixed {
  position: fixed;
  right: 90px;
  top: 30px;
}
.dv1 {
  display: flex;
  justify-content: space-between;
  margin: 0 40px;
  padding: 15px;
  overflow: hidden;
}
p {
  color: #000;
  margin: 10px 0;
}
.el-header,
.el-footer {
  background-color: #0d6efd;
  color: #fff;
  height: 5vh;
}

.el-main {
  background-color: #e9eef3;
  color: #000;
  height: 90vh;
}
</style>
